<style include="cr-shared-style settings-shared iron-flex">
  #ambientModeEnable {
    border-bottom: var(--cr-separator-line);
    border-top: var(--cr-separator-line);
  }

  #pageDescription {
    padding-inline-end: var(--cr-section-padding);
    padding-inline-start: var(--cr-section-padding);
    padding-top: 0;
  }

  #topicSourceListDiv {
    border-bottom: var(--cr-separator-line);
  }

  /* Set padding on children instead of the container itself to ensure that
   * separator lines can fill the entire width of the page. */
  #topicSourceListDiv > *,
  #weatherDiv > * {
    /* Padded to the right to allow space for a ripple */
    padding-inline-end: calc(var(--cr-section-padding) -
        var(--cr-icon-ripple-padding));
    padding-inline-start: var(--cr-section-padding);
  }

  #weatherTitle {
    padding-bottom: 16px;
    padding-top: 16px;
  }

  .list-item {
    padding-inline-start: var(--cr-section-padding);
  }

  paper-spinner-lite {
    display: block;
    height: 28px;
    margin: 100px auto;
    width: 28px;
  }
</style>
<h2 id="pageDescription">
  $i18n{ambientModePageDescription}
</h2>

<settings-toggle-button id="ambientModeEnable"
    class="primary-toggle"
    pref="{{prefs.settings.ambient_mode.enabled}}"
    label="[[getAmbientModeOnOffLabel_(
        prefs.settings.ambient_mode.enabled.value)]]"
    deep-link-focus-id$="[[Setting.kAmbientModeOnOff]]">
</settings-toggle-button>

<paper-spinner-lite active='[[!showSettings_]]' hidden='[[showSettings_]]'>
</paper-spinner-lite>

<template is="dom-if" if="[[showSettings_]]">
  <div id="topicSourceListDiv" class="layout vertical flex"
      aria-hidden="[[disableSettings_]]">
    <topic-source-list topic-sources="[[topicSources_]]"
        selected-topic-source="[[selectedTopicSource_]]"
        has-google-photos-albums="[[hasGooglePhotosAlbums_]]"
        disabled='[[disableSettings_]]'>
    </topic-source-list>
  </div>
  <div id="weatherDiv" class="layout vertical flex"
      aria-hidden="[[disableSettings_]]">
    <h2 id="weatherTitle" aria-hidden="true">
      $i18n{ambientModeWeatherTitle}
    </h2>
    <div class="list-frame">
      <cr-radio-group
          id="ambientTemperatureUnit"
          selected="{{selectedTemperatureUnit_}}"
          disabled$='[[disableSettings_]]'
          aria-labelledby="weatherTitle">
        <cr-radio-button
            name="[[AmbientModeTemperatureUnit_.FAHRENHEIT]]"
            class="list-item underbar"
            label="$i18n{ambientModeTemperatureUnitFahrenheit}">
        </cr-radio-button>
        <cr-radio-button
            name="[[AmbientModeTemperatureUnit_.CELSIUS]]"
            class="list-item"
            label="$i18n{ambientModeTemperatureUnitCelsius}">
        </cr-radio-button>
      </cr-radio-group>
    </div>
  </div>
</template>
